<template>
    <view class="body">
        <image class="close-icon" :src="ossImg('others/goods/close.png')" @click.stop="emits('close')" />
        <view class="title">退款原因</view>

        <view class="refundReason">
            <radio-group @change="radioChange">
                <label v-for="(item, index) in refundReason" :key="index">
                    <view class="flex justify-between item">
                        <view>{{ item }}</view>
                        <view>
                            <radio :value="item" :checked="item === reasonVal" color="#0058C6" />
                        </view>
                    </view>
                </label>
            </radio-group>
        </view>
        <view class="confirm">
            <button @click.stop="handleConfirm">确认</button>
        </view>
    </view>
</template>
<script setup>
import { ref, defineEmits, defineProps, watch } from "vue";
import { ossImg } from "@/utils/utils";
const refundReason = ['商品多选/错选', '不喜欢/不想要', '未按约定时间发货', '其他']
const emits = defineEmits(["confirm", "close"]);
const reasonVal = ref('')

const props = defineProps({
    value: {
        type: String,
        default: 1
    }
})

watch(
    () => props.value,
    () => {
        console.log("监听porps")
        reasonVal.value = props.value
    },
    {
        immediate: true,// 这个属性是重点啦
        deep: true // 深度监听的参数
    }
)

const radioChange = (e) => {
    console.log(e)
    reasonVal.value = e.detail.value
}

const handleConfirm = () => {
    emits("confirm", reasonVal.value);
};

</script>
<style lang="less" scoped>
.body {
    padding: 20px 16px;
    box-sizing: border-box;
    position: relative;

    .close-icon {
        width: 12px;
        height: 12px;
        position: absolute;
        top: 24px;
        right: 18px;
    }

    .title {
        font-size: 16px;
        font-weight: 700;
        text-align: center;
    }

    .item {
        font-size: 14px;
        padding: 10px 0;

        radio {
            transform: scale(0.7)
        }
    }

    .confirm {
        padding: 20px 22px 0 22px;
        box-sizing: border-box;

        button {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #0058c6;
            border-radius: 20px;
            color: white;
            font-size: 16px;

            &::after {
                border: none;
            }
        }
    }

}
</style>